<template>
  <div>
    <a-modal title="SKU详情" :visible="visible" @before-open="open" @cancel="visible = false" :footer="false" :align-center="false" title-align="start" width="1000px" :mask-closable="false">
      <div class="clearfix">
        <div class="fl" style="width: 200px; height: 200px">
          <a-image :src="getSrc()" :width="200" :height="200" />
        </div>
        <div class="fl" style="width: calc(100% - 200px)">
          <a-row>
            <a-col :span="3" style="color: #a2a2a2; text-align: right; width: 120px">SKU名称：</a-col>
            <a-col :span="19" :offset="1">{{ skuInfo.skuName ? skuInfo.skuName : '--' }}</a-col>
          </a-row>
          <a-row class="mt10">
            <a-col :span="12">
              <a-row>
                <a-col :span="6" style="color: #a2a2a2; text-align: right">SKU：</a-col>
                <a-col :span="15" :offset="2">{{ skuInfo.sku ? skuInfo.sku : '' }}</a-col>
              </a-row>
            </a-col>
            <a-col :span="12">
              <a-row>
                <a-col :span="6" style="color: #a2a2a2; text-align: right">产品状态：</a-col>
                <a-col v-if="!isFromErp" :span="15" :offset="2">{{ filterSkuStatus() }}</a-col>
              </a-row>
            </a-col>
          </a-row>
          <a-row class="mt10">
            <a-col :span="12">
              <a-row>
                <a-col :span="6" style="color: #a2a2a2; text-align: right">SPU：</a-col>
                <a-col :span="15" :offset="2" class="highlight cursor">{{ skuInfo.spu ? skuInfo.spu : '' }}</a-col>
              </a-row>
            </a-col>
            <a-col :span="12">
              <a-row>
                <a-col :span="6" style="color: #a2a2a2; text-align: right">重量：</a-col>
                <a-col v-if="!isFromErp" :span="15" :offset="2">
                  <div v-if="skuInfo.weight && skuInfo.weight.weight">{{ $extract(skuInfo, 'weight.weight') }}({{ $extract(skuInfo, 'weight.unit') }})</div>
                  <div v-else>--</div>
                </a-col>
              </a-row>
            </a-col>
          </a-row>
          <a-row class="mt10">
            <a-col :span="12">
              <a-row>
                <a-col :span="6" style="color: #a2a2a2; text-align: right">体积：</a-col>
                <a-col v-if="!isFromErp" :span="15" :offset="2">
                  <a-space v-if="skuInfo.volume">
                    <div>{{ $extract(skuInfo, 'volume.length') ? $extract(skuInfo, 'volume.length') : '-' }}×</div>
                    <div>{{ $extract(skuInfo, 'volume.width') ? $extract(skuInfo, 'volume.width') : '-' }}×</div>
                    <div>{{ $extract(skuInfo, 'volume.height') ? $extract(skuInfo, 'volume.height') : '-' }}</div>
                    <div>{{ $extract(skuInfo, 'volume.unit') }}</div>
                  </a-space>
                  <div v-else>--</div>
                </a-col>
              </a-row>
            </a-col>
            <a-col :span="12">
              <a-row>
                <a-col :span="6" style="color: #a2a2a2; text-align: right">销售员：</a-col>
                <a-col :span="15" :offset="2" v-if="skuInfo.salerList">
                  <span class="name color" v-for="(item, index) of skuInfo.salerList">{{ item.name }}{{ index != skuInfo.salerList.length - 1 ? ',' : '' }}</span>
                </a-col>
                <a-col :span="15" :offset="2" v-else>
                  <span>--</span>
                </a-col>
              </a-row>
            </a-col>
          </a-row>
          <a-row class="mt10">
            <a-col :span="3" style="color: #a2a2a2; text-align: right">产品类目：</a-col>
            <a-col :span="15" :offset="1">{{ $extract(skuInfo, 'category.name') }}</a-col>
          </a-row>
          <a-row class="mt10" v-if="!isFromErp">
            <a-col :span="3" style="color: #a2a2a2; text-align: right">标签：</a-col>
            <a-col :span="20" :offset="1">
              <span v-if="skuInfo.tagList" v-for="tag of skuInfo.tagList" class="tag-btn" :style="{ backgroundColor: tag.color }">{{ tag.name }}</span>
            </a-col>
          </a-row>
          <a-row class="mt10" v-if="!isFromErp">
            <a-col :span="3" style="color: #a2a2a2; text-align: right">备注：</a-col>
            <a-col :span="20" :offset="1">
              {{ skuInfo.remark }}
            </a-col>
          </a-row>
        </div>
      </div>

      <div v-if="specList[0] && !isFromErp">
        <div class="title-bar">规格</div>
        <a-descriptions class="mt10 mb10" :data="specList" bordered />
      </div>

      <a-tabs v-model:active-key="currentTab">
        <a-tab-pane title="产品图" :key="1">
          <downloadPic ref="downloadPic" />
        </a-tab-pane>
        <a-tab-pane title="产品属性" :key="2">
          <div v-if="propertyListData[0]" class="mt10">
            <a-descriptions :data="propertyListData" bordered />
          </div>
          <a-empty v-else />
        </a-tab-pane>
        <a-tab-pane title="产品资料" :key="3">
          <a-table :data="productDatalist" :pagination="false" class="table-two-line mt10" size="mini" :scroll="{ y: 300 }">
            <template #columns>
              <a-table-column title="资料类型" #cell="{ record }">{{ record.type }}</a-table-column>
              <a-table-column title="附件" #cell="{ record }">
                <img width="40" height="40" v-if="record.fileType != 'img'" :src="typeMap[record.fileType || 'sub']" alt="" />
                <img style="width: 40px; height: 40px" v-else :src="record.url" alt="" />
              </a-table-column>
              <a-table-column title="资料名称" #cell="{ record }">
                <TextLimit :rows="1" position="top">{{ record.name }}</TextLimit>
              </a-table-column>
              <a-table-column title="操作人" #cell="{ record }">
                {{ record.createUname }}
              </a-table-column>
              <a-table-column title="操作时间" #cell="{ record }">
                {{ $setTime(record.gmtCreate) }}
              </a-table-column>
              <a-table-column title="操作" #cell="{ record, rowIndex }" :width="90">
                <a-button class="ml10" type="text" @click="download(record)">下载</a-button>
              </a-table-column>
            </template>
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, computed, reactive } from 'vue'
  import { getDataType } from '@/utils'
  import { getProductBySkuForInnerErp, getRelatedByCompanySku } from '@/api/product'
  import _ from 'lodash-es'
  import world from '@/assets/word.png'
  import excel from '@/assets/excel-.png'
  import pdf from '@/assets/pdf1.png'
  import cad from '@/assets/CAD.png'
  import psd from '@/assets/psd.png'
  import sub from '@/assets/yuanwenjian-1.png'
  // import ShowSpuDetail from './showSpuDetail.vue'
  import DownloadPic from './downloadPic.vue'

  export default defineComponent({
    emits: ['save'],
    props: ['info', 'isShow'],
    components: { DownloadPic },
    setup(props, { emit }) {
      let visible = ref(props.isShow)
      const showDetial = ref()
      const downloadPic = ref()
      const spuDetail = ref({ type: '', data: {} })
      let skuInfo: any = ref({})
      let specList: any = ref([])
      let productDatalist: any = ref([])
      let propertyListData: any = ref([])
      let currentTab = ref(1)

      let typeMap = {
        world: world,
        excel: excel,
        pdf: pdf,
        cad: cad,
        psd: psd,
        sub: sub,
      }

      const isFromErp = computed(() => {
        return props.info.from == 'erp'
      })

      const open = () => {
        currentTab.value = 1
        // 图片信息
        downloadPic.value.init({})
        props.info.from != 'erp' ? getSkuDetail() : getSkuDetailForErp()
      }

      const getSkuDetailForErp = async () => {
        skuInfo.value = {}
        let params = {
          loadSpu: true,
          ownerCompanyId: props.info.companyId,
          sku: props.info.product.sku,
        }
        const res: any = await getProductBySkuForInnerErp(params)
        let skuIDoc = res?.data?.result || {}
        let spuDoc = res?.data?.spuDoc || {}
        let developersArr = skuIDoc?.developers || []
        let propsObj = skuIDoc?.props || {}
        // sku信息
        let obj = {
          ...res.data.result,
          skuName: skuIDoc.productName,
          sku: skuIDoc.productSku,
          spu: spuDoc.productSpu,
          salerList: developersArr.filter((e: any) => e.role == '运营'),
          category: {
            name: skuIDoc?.cat?.path,
          },
        }
        // 属性信息
        skuInfo.value = obj
        propertyListData.value = []
        for (const key in propsObj) {
          let obj = {
            label: propsObj[key].name,
            value: '',
          }
          switch (getDataType(propsObj[key].val)) {
            case 'string':
              obj.value = propsObj[key].val
              break
            case 'number':
              obj.value = propsObj[key].val
              break
            case 'array':
              obj.value = propsObj[key].val.join(',')
              break
            case 'object':
              let arr = []
              for (const valkKey in propsObj[key].val) {
                arr.push(propsObj[key].val[valkKey])
              }
              obj.value = arr.join(',')
              break
            default:
              obj.value = ''
              break
          }
          propertyListData.value.push(obj)
        }

        //  图片信息
        downloadPic.value.init(skuInfo.value)

        // 产品资料
        let prodcutDataArr = res.data.result.dataBanks.filter((e: any) => e.classify == 'CAD资料')
        productDatalist.value = prodcutDataArr.map((e: any) => {
          e.fileType = 'cad'
          e.type = 'CAD'
          return e
        })
      }

      const getSkuDetail = async () => {
        skuInfo.value = {}
        try {
          const res = await getRelatedByCompanySku({ companyId: props.info.companyId, sku: props.info.product.sku })
          skuInfo.value = res?.data || {}
          specList.value = []
          if (skuInfo.value.specValueList) {
            skuInfo.value.specValueList.forEach((e: any) => {
              let obj = { label: e.nameCn, value: e.valueCn }
              specList.value.push(obj)
            })
          }
          downloadPic.value.init(skuInfo.value)

          if (skuInfo.value.propList) delPropertyListData(skuInfo.value.propList)

          // 显示资料信息
          productDatalist.value = res.data.productSpu?.productInfoList || []
        } catch (error) {}
      }

      const delPropertyListData = (list: any) => {
        propertyListData.value = []
        list.forEach((e: any) => {
          let obj = {
            label: e.name,
            value: '',
          }
          let text = ''
          switch (e.type) {
            case 1:
            case 4:
              text = e.valueStr
              break
            case 2:
            case 7:
            case 8:
              text = e.valueStrList.join(',')
              break
            case 3:
              text = e.valueBoolean ? '是' : '否'
              break
            case 5:
              text = e.valueNumber
              break
            case 6:
              text = e.valueBigDecimal
              break
            default:
              text = '类型未定义'
              break
          }
          obj.value = text
          propertyListData.value.push(obj)
        })
      }

      const getSrc = () => {
        let str = ''
        if (props.info.from != 'erp') {
          str = skuInfo.value?.productPicList && skuInfo.value?.productPicList[0] ? skuInfo.value?.productPicList[0].url : ''
        } else {
          str = skuInfo.value?.medias?.shopWindowPics[0]?.url
        }
        return str
      }

      const filterSkuStatus = () => {
        let text = ''
        switch (skuInfo.value.status) {
          case 'ACTIVE':
            text = '可售'
            break
          case 'NOT_ACTIVE':
            text = '停售'
            break
          case 'DISCONTINUED':
            text = '停产'
            break
          case 'OUTSOURCED':
            text = '委托加工'
            break
        }
        return text
      }

      const download = (info: any) => {
        let a = document.createElement('a')
        a.target = '_blank'
        a.href = info.url
        a.click()
      }

      return {
        visible,
        open,
        getSrc,
        showDetial,
        // showSpuDetail,
        spuDetail,
        skuInfo,
        filterSkuStatus,
        specList,
        downloadPic,
        currentTab,
        propertyListData,
        productDatalist,
        download,
        typeMap,
        isFromErp,
      }
    },
  })
</script>

<style lang="less" scoped>
  .tag-btn {
    height: 20px;
    line-height: 20px;
    padding: 0 5px;
    color: white;
    margin-right: 5px;
  }
</style>
